<template>
  <div>
    <img class="headerimg" :src="headerimg" alt />
    <ul>
      <li
        v-for="item in minearry"
        class="mineitem"
        @click="itemclick(item)"
        :key="item.label"
      >
        <span class="minetitle">
          {{ item.label }}
          <span v-if="item.value ? true : false"
            >{{ (item.value * 100).toFixed(2) }}%</span
          >
        </span>
        <i class="cubeic-arrow" v-if="item.value ? false : true"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { close } from "../utils/websocket";

export default {
  data() {
    return {
      headerimg: require("../assets/learn.png"),
      minearry: [
        { label: "个人信息", type: "personalInfo" },
        // { label: "学习进度", type: "progress" },
        { label: "教务公告", type: "notices" },
        { label: "退出", type: "exit" }
      ]
    };
  },
  methods: {
    itemclick(item) {
      switch (item.type) {
        case "exit":
          this.$store.commit("setToken", "");
          localStorage.clear();
          close();
          this.$router.push({ path: "/login" });
          break;

        case "personalInfo":
          this.$router.push({ path: "/personalinfo" });
          break;

        case "progress":
          this.$router.push({ path: "/progress" });
          break;

        case "notices":
          this.$router.push({ path: "/notices" });
          break;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.mineitem {
  font-size: 14px;
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  border-bottom: 1px solid #eee;

  .minetitle {
    display: inline-block;
    width: 90%;

    span {
      font-size: 14px;
      position: fixed;
      right: 10px;
      color: #000;
    }
  }
}

.headerimg {
  height: 150px;
  width: 100%;
}
</style>
